<template>
    <div id='archives'>
        <el-container class='tl-overflow-hidden'>
            <el-header class='arch-header tl-overflow-hidden tl-width-100-percent tl-text-center'>
                <h1 class='sb-title tl-font-60-px tl-text-shadow-mini tl-color-white tl-margin-top-80'>归档</h1>
                <span class='tl-display-inline-block tl-font-18-px tl-text-shadow-mini tl-margin-top-30' id='arch'/>
            </el-header>
            <el-main class='tl-padding-20 tl-margin-top--75'>
                <div class="tl-margin-auto tl-width-80-percent">
                    <div class="tl-padding-0-15">
                        <el-card class='tl-border-radius-8'>
                            <div class='tl-margin-auto tl-v-center' slot='header'>
                                <i class='iconfont icon-bookmark tl-font-24-px'></i>
                                <span class='tl-margin-left-5 tl-font-24-px tl-font-weight-700' v-text="`共${total}篇`"/>
                            </div>
                            <el-container class='sortBox'>
                                <el-aside width="17%">
                                    <div style="margin: 20px 0 20px 40px;">
                                        <el-switch v-model='reverse' active-text='倒序' inactive-text='正序' inactive-color='#13ce66'>
                                        </el-switch>
                                    </div>
                                    <div class='time'>
                                        <el-timeline :reverse='reverse'>
                                            <el-timeline-item v-for='(activity, index) in activities' hide-timestamp :key='index'>
                                        <span @click='clickTime(activity.content)'
                                              :class="[activity.content === selectContent ? 'sortBoxSpan sortBoxSpanSelect' : 'sortBoxSpan']">
                                            {{ activity.content }}
                                        </span>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </div>
                                </el-aside>
                                <el-main class='article'>
                                    <el-timeline>
                                        <el-timeline-item
                                            v-for='item in itemByDate' :key='`item-${item.createTime}`'
                                            :timestamp='item.createTime' placement='top'>
                                            <el-card>
                                                <div @click="link(item.id)" class="tl-font-24-px tl-margin-bottom-10 itemTitle">
                                                    <strong>{{ item.title }}</strong>
                                                </div>
                                                <div class="tl-v-center">
                                                    <i class="iconfont icon-create-time"></i><span class="tl-margin-left-5">提交于 {{ item.createTime }}</span>
                                                    <div class="tl-margin-0-10"></div>
                                                    <i class="iconfont icon-update-time tl-margin-0-5"></i><span>更新于 {{ item.updateTime }}</span>
                                                </div>
                                            </el-card>
                                        </el-timeline-item>
                                    </el-timeline>
                                </el-main>
                            </el-container>
                        </el-card>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { dateFormat } from '@/assets/js/filter';
import { getBlogByMonth, getSortList } from '@/api/archives/archives';
import { total } from '@/api/blog/blog';

export default {
    name: 'Archives',
    components: {},
    data () {
        return {
            selectContent: '',
            reverse: true,
            activities: [],
            itemByDate: [],
            total: 0
        }
    },
    methods: {
        async clickTime (content) {
            this.selectContent = content;
            const res = await getBlogByMonth({ monthDate: content })
            if (res.code === 200) {
                this.itemByDate = res.data;
                this.itemByDate.forEach((item) => {
                    item.createTime = dateFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss')
                    item.updateTime = dateFormat(item.updateTime, 'yyyy-MM-dd hh:mm:ss')
                })
            }
        },
        getSortList: async function () {
            const res = await getSortList();
            if (res.code === 200) {
                const activities = res.data;
                const result = [];
                for (let i = 0; i < activities.length; i++) {
                    const temp = activities[i].replace('年', '-').replace('月', '-') + '01';
                    const dataForDate = { content: activities[i], timestamp: temp };
                    result.push(dataForDate);
                }
                this.activities = result;
                // 默认选择最后一个
                await this.clickTime(activities[activities.length - 1])
            }
        },
        getBlogTotal: async function () {
            const res = await total();
            if (res.code === 200) {
                this.total = res.data
            }
        },
        link: function (id) {
            window.open(`/web/blog/${id}`, '_blank');
        }
    },
    created: function () {
        this.getBlogTotal()
        this.getSortList()
    },
    mounted: function () {
        this.auto(["Welcome to ityanger's personal blog.", '欢迎来到ityanger的个人网站.'], document.getElementById('arch'));
    }
}
</script>

<style lang='less' scoped>
.sortBox {
    color: #555;
}

.sortBoxSpan {
    cursor: pointer;
}

.sortBoxSpan:hover {
    color: #409eff;
}

.sortBoxSpanSelect {
    color: #409eff;
}

.itemTitle {
    cursor: pointer;
}

.itemTitle:hover {
    color: #409eff;
}

.elTag {
    cursor: pointer;
}

.sortBox .time {
    padding-top: 20px;
    height: 720px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
}

.sortBox .article {
    //margin-left: 20px;
    //float: left;
    width: 78% !important;
    height: 800px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
}

//-------------------//
//.el-timeline-item {
//    ::v-deep .el-timeline-item__node--large {
//        left: -6px !important;
//        width: 22px !important;
//        height: 22px !important;
//    }
//}
//
//.large-text {
//    ::v-deep .el-timeline-item__timestamp {
//        font-size: 24px;
//    }
//}

.el-card {
    ::v-deep .el-card__header {
        display: flex;
        margin: auto;
    }
}

.arch-header {
    height: 300px !important;
    background: url('https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp') center center / cover no-repeat rgb(34, 34, 34);
}

.sb-title {
    margin: 120px 0 5px 0;
    letter-spacing: 2px;
    font-weight: 700;
    -webkit-animation: fade-in-down 1s;
    animation: fade-in-down 1s both;
    -webkit-animation-delay: .6s;
    animation-delay: .5s;
}

@keyframes caret {
    50% {
        border-right-color: transparent;
    }
}

#arch {
    color: #eee;
    border-right: 2px solid #eee;
    animation: caret 0.5s step-end infinite;
}
</style>
